<template>
	<view class="page">
		<view class="h-block">
			<view class="h-box">
				<image src="https://baxztech.com/bian_admin_api/public/bianmp/pedometer.png" class="iconImgs"></image>
				<view  class="h-title">步数</view>
				<view style="line-height: 36rpx;margin-top: 20rpx;">
					<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.pedometer}}</text>
					<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">步</text>
				</view>
				<view class="h-time">{{healthData.pedometerTime}}</view>
			</view>
			<view class="h-box">
				<image src="https://baxztech.com/bian_admin_api/public/bianmp/heart-rote.png" class="iconImgs"></image>
				<view class="h-title">心率</view>
				<view style="line-height: 36rpx;margin-top: 20rpx;">
					<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.heartRate}}</text>
					<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">bpm</text>
				</view>
				<view class="h-time">{{healthData.heartRateTime}}</view>
			</view>
		</view>
		<view class="h-block">
			<view class="h-box">
				<image src="https://baxztech.com/bian_admin_api/public/bianmp/oyxgen.png" class="iconImgs"></image>
				<view  class="h-title">血氧</view>
				<view style="line-height: 36rpx;margin-top: 20rpx;">
					<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.oxygen}}</text>
					<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">%</text>
				</view>
				<view class="h-time">{{healthData.oxygenTime}}</view>
			</view>
			<view class="h-box">
				<image src="https://baxztech.com/bian_admin_api/public/bianmp/temperature.png" class="iconImgs"></image>
				<view class="h-title">体温</view>
				<view style="line-height: 36rpx;margin-top: 20rpx;">
					<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.temperature}}</text>
					<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">℃</text>
				</view>
				<view class="h-time">{{healthData.temperatureTime}}</view>
			</view>
		</view>
		<view  style="width: 684rpx;margin: 30rpx auto;background-color: #fff;border-radius: 40rpx;">
			<view style="padding: 30rpx;">
				<view class="flex-SB">
					<view class="h-title">血压</view>
					<image src="https://baxztech.com/bian_admin_api/public/bianmp/blood-glucose.png" class="iconImg"></image>
				</view>
				<view style="display: flex;margin-top: 20rpx;">
					<view style="width: 320rpx;padding: 40rpx;background: #F5F5F5;">
						<view class="h-title">收缩压</view>
						<view>
							<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.sdp}}</text>
							<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">mmHg</text>
						</view>
					</view>
					<view style="width: 320rpx;padding: 40rpx;background: #F5F5F5;margin-left: 20rpx;">
						<view class="h-title">舒张压</view>
						<view>
							<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.dbp}}</text>
							<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">mmHg</text>
						</view>
					</view>
				</view>
				<view class="h-time">{{healthData.bloodTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				healthData:{
					upload_time:"",
					heartRate:"-",
					oxygen:"-",
					sdp:"-",
					dbp:"-",
					temperature:"-",
					pedometer:"-",
					heartRateTime:"-",
					oxygenTime:"-",
					bolldTime:"-",
					temperatureTime:"-",
					pedometerTime:"-"
				},
				beatHeartData:{}
			};
		},
		onLoad() {
			uni.$u.http.post('/client/watch_health_data',{imei:this.member.imei}).then(res=>{
				if(res.data.healthData.length){
					let init = res.data.healthData[0];
					let todata = JSON.parse(init.health)
					this.healthData.upload_time = init.updateTime;
					if(todata.hr.length){
						if(typeof todata.hr[0] == "string"){
							this.healthData.heartRate = JSON.parse(todata.hr[0]).value;
							this.healthData.heartRateTime = JSON.parse(todata.hr[0]).time;
						}else{
							this.healthData.heartRate = todata.hr[0].value;
							this.healthData.heartRateTime = todata.hr[0].heartRateTime;
						}
					}
					
					if(todata.lk.length){
						if(typeof todata.lk[0] == "string"){
							this.healthData.pedometer = JSON.parse(todata.lk[0]).pedometer;
							this.healthData.pedometerTime = JSON.parse(todata.lk[0]).time;
						}else{
							this.healthData.pedometer = todata.lk[0].pedometer;
							this.healthData.pedometerTime = todata.lk[0].time;
						}
					}
					if(todata.oxygen.length){
						if(typeof todata.oxygen[0] == "string"){
							this.healthData.oxygen = JSON.parse(todata.oxygen[0]).oxygen;
							this.healthData.oxygenTime = JSON.parse(todata.oxygen[0]).time;
						}else{
							this.healthData.oxygen = todata.oxygen[0].oxygen;
							this.healthData.oxygenTime = todata.oxygen[0].time;
						}
					}
					if(todata.blood.length){
						if(typeof todata.blood[0] == "string"){
							this.healthData.dbp = JSON.parse(todata.blood[0]).dbp;
							this.healthData.sdp = JSON.parse(todata.blood[0]).sdp;
							this.healthData.bloodTime = JSON.parse(todata.blood[0]).time;
						}else{
							this.healthData.dbp = todata.blood[0].dbp;
							this.healthData.sdp = todata.blood[0].sdp;
							this.healthData.bloodTime = todata.blood[0].time;
						}

					}
					if(todata.temperature.length){
						if(typeof todata.temperature[0] == "string"){
							this.healthData.temperature = JSON.parse(todata.temperature[0]).temperature;
							this.healthData.temperatureTime = JSON.parse(todata.temperature[0]).time;
						}else{
							this.healthData.temperature = todata.temperature[0].temperature;
							this.healthData.temperatureTime = todata.temperature[0].time;
						}
					}
				}
			})
		},
		methods:{
			
		},
	}
</script>

<style lang="scss" scoped>
	.block{
		width: 684rpx;margin: 30rpx auto;
	}
	.iconImg{
		width: 56rpx;
		height: 56rpx;
	}
	.iconImgs{
		position: absolute;
		top: 28rpx;
		right: 28rpx;
		width: 56rpx;
		height: 56rpx;
	}
	.h-block{
		display: flex;width: 684rpx;justify-content: space-between;margin: 20rpx auto;line-height: 36rpx;
	}
	.h-box{
		width: 270rpx;border-radius: 40rpx;padding: 30rpx;background-color: #fff;position: relative;
	}
	.h-title{
		font-size: 32rpx;color: #2E2E2E;line-height: 36rpx;font-weight: bold;
	}
	.h-time{
		color: #969696;font-size: 24rpx;line-height: 36rpx;margin-top: 20rpx;
	}
</style>
